<template>
	<view class="container">
		<!-- 		<view class="btn">
			<button type="primary" class="button" @click="check()">支付成功点击此处 </button>
			<button type="primary" class="button" @click="t_exit()">暂时不支付 </button>
		</view>
		<iframe style="width: 100%;"> -->
		<web-view class="web" :src="encodeHtml()" @message="onMessage" @onPostMessage="postMessage" :fullscreen="false">
		</web-view>
		<!-- </iframe> -->
		<!-- 				<web-view class="web" :src="viewHtml(msg)" :useragent="useragent"></web-view> -->

		<!-- <view v-html="msg"></view> -->
		<!-- <web-view id="order_html" ></web-view> -->
		<!-- 		<text>{{msg}}</text>
		<text>-----------------</text>
		<text>-----------------</text> -->
		<!-- 				<rich-text class="rich" :nodes="takeHtml(msg)"></rich-text>
		<text>-----------------</text> -->
		<!-- 		<web-view class="web" :src="takeHtml(msg)" :useragent="useragent"></web-view> -->
		<!-- <p v-html="msg"></p> -->


	</view>
</template>

<script>
	export default {
		// props: ['msg'],
		data() {
			return {
				pre: 'data:text/html;charset=utf-8,',
				preHtml: `<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>`,
				afterHtml: `  </body></html>`,
				useragent: `useragent="Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/76.0.3809.132 Mobile Safari/537.36"`,

				msg: "",
				orderId: 0,
			};
		},
		onLoad(options) {
			this.msg = uni.getStorageSync('orderMsg')
			this.orderId = uni.getStorageSync('orderId')
			// this.createDiv()
			// this.msg = options.msg
		},
		methods: {
			async check() {
				const res = await uni.$dapi.getCheck(this.orderId)
				console.log(res);
				if (res == undefined) {
					return;
				}
				uni.navigateTo({
					url: '../order_success/order_success'
				})
				uni.$showMsg("支付成功")
			},
			t_exit() {
				uni.switchTab({
					url: '/pages/my/my'
				})
			},
			onMessage(event) {
				console.log('web-view message:', event)
				// if (event.data.status === 'success') {
				// // 跳转到首页
				// uni.navigateTo({
				// url: '../order_success/order_success'
				// })
				// } else {
				// console.log(res.data.msg)
				// }
			},
			postMessage(e) {
				console.log('web-view post message:', e)
			},
			getHtml(str) {
				const strHtml = this.preHtml + str + this.afterHtml
				// console.log(strHtml);
				return strHtml
			},
			takeHtml(str) {
				return this.pre + this.getHtml(str)
			},
			viewHtml() {
				return this.pre + this.msg
			},
			encodeHtml() {
				return this.pre + encodeURIComponent(this.msg) + uni.$navHtml.getSuffix()
			},
			createDiv() {
				const res = this.msg;
				const order = document.querySelector('#order_html').innerHTML = res;
				// 调用submit方法
				document.forms[0].submit()
				// const div = document.createElement('div');
				// div.innerHTML = res;
				// document.body.appendChild(div);
				//document.getElementsByName("return_url")[0].value//其实这里能抓到表单中的一些值，但是我想修改就失败了

				//表单填入之后，调用表单的提交，以此来跳转到支付宝的h5收银台，它会去唤醒支付宝app
				// document.forms.alipaysubmit.submit();

			},
			payment() {
				//#ifdef H5
				if (!this.isWeixin()) { //检测是否是微信环境
					//后端给的form表单，也是唤起支付宝的关键
					that.formContent = res.data.alipayRequest; // 记得data中声明该变量
					that.$nextTick(() => {

						//这里就是提交表单唤起支付宝，中括号中的name名称，要与后端给的form表单name名称一致，
						document.forms['punchout_form'].submit();
					});

				}
				//#endif
			},

			//判断是否是微信浏览器
			isWeixin() {
				let ua = window.navigator.userAgent.toLowerCase()
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true;
				}
				return false;
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: block;
		height: 100%;
		width: 100%;

		.rich {
			height: 400rpx;
			width: 100%;
			background-color: red;
		}

		btn {
			position: fixed;
			z-index: 10;
			margin-top: 400rpx;

			.button {
				border: 5rpx solid red;
				box-shadow: 10rpx 10rpx #888888;
				// border-radius: 40rpx;
			}
		}



		// .web {
		// 	height: 400rpx;
		// 	width: 100%;
		// 	background-color: red;
		// }
	}
</style>



<!-- 				order_action: "https://openapi.alipaydev.com/gateway.do?charset=utf-8&method=alipay.trade.page.pay&sign=NRdGoyGVXfJ7dyuNVhVVhfvdrnhyv34D2NrKgoCduc8pEfApCYq3xY2DKGb6htitjBqaDK7uzN3SB5dPmpRzzKab1OBx6TODFI1syX21sqQaQkWxHJnwmFi9u6rPdOmqkht3nUqsmjHX9HxCrZVAnrpQ3QWO2m3qLt2cfbOliU7oiX1aNgJEeUGesp0JRfQ%2BdBbPTZ%2F%2F5zxH4TcDWPaLz6%2BMLPzkiTIbnRIM54rH3qg19vfrkSQenTAhYpGDSb5eNKZovmTJExkVmPbT2ZS0LUnMYvPhIxYDQ2p3BD9ZULO5w0%2Fj0Oh3xoB%2FeVbMfJ2QtDjp2YsD6OInqKrjtlfLTQ%3D%3D&return_url=http%3A%2F%2Flocalhost%3A8080%2FafterPay&notify_url=http%3A%2F%2Fkqe8aq.natappfree.cc%2Fnotify&version=1.0&app_id=2021000122672826&sign_type=RSA2&timestamp=2023-06-10+17%3A11%3A43&alipay_sdk=alipay-sdk-java-dynamicVersionNo&format=json",
				order_value: "{&quot;out_trade_no&quot;:&quot;1667459517719265282&quot;,&quot;total_amount&quot;:6699.0,&quot;subject&quot;:&quot;用户1650851335379206145的订单&quot;,&quot;product_code&quot;:&quot;FAST_INSTANT_TRADE_PAY&quot;}", -->